<template>
  <!-- 小说阅读器 -->
  <div class="comicreader" @mousemove="updateXY" >
    <el-collapse-transition>
      <div
        @mousemove="showChapterFn"
        @mouseleave="mouseleaveFn"
        class="headcss"
        v-show="isShowPopup"
      >
        <Head />
      </div>
    </el-collapse-transition>
    <!-- 内容展示  -->
    <div
      :class="['centerBox', nigthmode == false ? '' : 'nigthmodecss']"
      @click="isShowPopup = false"
      @scroll="scrollFn"
      ref="filterTable"
    >
      <!-- 返回头部做锚点链接 -->
      <div id="id0"></div>
      <!-- 图片懒加载 -->
      <div v-for="(fit, index) in imgList" :key="index" :id="'id' + index">
        <!-- <span class="demonstration">{{ fit }}</span> -->
        <el-image
          :style="{ height: fit.height + 'px', width: fit.width + 'px' }"
          :src="fit.photo"
          lazy
        ></el-image>
      </div>
      <!-- :style="['height:' + item.height + 'px','width:'+(item.width) +'px']" -->
      <div class="nextword cursor" @click="nextWordFn">Next chapter</div>
    </div>
    <!-- 底部弹出框 -->
    <el-collapse-transition>
      <div class="foodBox" v-show="isShowPopup">
        <div class="food">
          <!-- 百分比 -->
          <!-- <el-input-number
            v-model="num"
            @change="handleChange"
            :min="1"
            :max="100"
            label="描述文字"
          ></el-input-number> -->
          <!-- 章节滑块 -->
          <div class="sliderbox">
            <div>{{ chapervalue }}/ {{ bookmax }}</div>
            <el-slider
              v-model="chapervalue"
              @change="formatTooltip"
              :min="1"
              :max="bookmax"
            ></el-slider>
          </div>
          <div class="operationBox">
            <div class="text cursor" @click="previousWordFn()">
              Previous chapter
            </div>
            <div class="text cursor" @click="nextWordFn()">Next chapter</div>
            <div
              class="text textpopup cursor"
              @mousemove="showChapterFn(1)"
              @mouseleave="mouseleaveFn(1)"
            >
              Chapter
              <!-- 目录弹出框 -->
              <transition name="el-zoom-in-bottom">
                <div class="allchaper" v-show="showChapter">
                  <div class="alltext">All chapters ({{ count }})</div>
                  <div
                    class="titlebox"
                    v-infinite-scroll="load"
                    style="overflow: auto"
                    infinite-scroll-immediate="false"
                  >
                    <div
                      v-for="item in chapterList"
                      :key="item.id"
                      class="cursor"
                      @click="chapterIdFn(item.id)"
                    >
                      {{ item.title | ellipsis }}
                    </div>
                  </div>
                </div>
              </transition>
            </div>
            <!-- 黑夜模式 -->
            <div
              class="text textimg cursor"
              @click="nigthmode = !nigthmode"
              v-show="!nigthmode"
            >
              <img src="../../assets/homeimg/组 7938@2x.png" alt="" /> Dark
            </div>
            <div
              class="text textimg cursor"
              @click="nigthmode = !nigthmode"
              v-show="nigthmode"
            >
              <img src="../../assets/homeimg/7938@2x.png" alt="" /> Light
            </div>
          </div>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
import Head from "../../components/Head.vue";
import { Decrypt } from "../../plugins/cypto/crypto";
import {
  ContentsingleMhApi,
  ContentsingleBookApi,
} from "../../requery/api";
export default {
  filters: {
    //文字过滤器
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 17) {
        return value.slice(0, 17) + "...";
      }
      return value;
    },
  },
  data() {
    return {
      chapervalue: 1, //滑块当前值
      offsetHeight: null, //body高度
      isShowPopup: false, //显示弹框
      showChapter: false, //显示目录弹框
      bookmax: 50, //本章最大图片数
      nigthmode: false, //黑夜模式
      chapterList: [], //目录盒子
      imgList: [], //内容盒子
      huakuai: [], //图片高度盒子
      next_id: null, //下一章id
      pre_id: null, //上一章id
      book_id: 1334, //书本id
      page: 1, //当前页
      book_name: "", //书名
      count: 0, //总章数
      scrollTopY: 0,
      centerStyle: {
        transform: "transform: scale(1)",
        bgc: "#fff",
      },
    };
  },

  methods: {
    //点击目录跳转
    chapterIdFn(id) {
      this.huakuai = [];
      this.conten(id);
    },
    // 下一章按钮
    nextWordFn() {
      this.huakuai = [];
      this.conten(this.next_id);
    },
    //上一章按钮
    previousWordFn() {
      this.huakuai = [];
      this.conten(this.pre_id);
    },
    // 百分比
    handleChange(value) {
      console.log(value, "vaw");
    },
    // 滑块
    formatTooltip(val) {
      this.chapervalue = val;
      document.getElementById(`id${val}`).scrollIntoView(true);
    },
    // 获取鼠标位置
    updateXY(e) {
      if (e.y <= 50 || this.offsetHeight - 66 <= e.y) {
        this.isShowPopup = true;
      } else if (this.showChapter) {
        this.isShowPopup = true;
      }
    },
    // 鼠标移入
    showChapterFn(e) {
      if (e == 1) {
        this.showChapter = true;
      }
      this.isShowPopup = true;
    },
    // 鼠标移出
    mouseleaveFn(e) {
      if (e == 1) {
        this.showChapter = false;
      }
    },
    // 当前位置
    scrollFn(e) {
      for (let i = 0; i < this.huakuai.length - 1; i++) {
        if (
          this.huakuai[i] <= e.target.scrollTop &&
          this.huakuai[i + 1] >= e.target.scrollTop
        ) {
          this.chapervalue = i + 1;
        }
      }
    },
    // 点击黑夜模式
    nightModeFn() {
      let mode = false;
      if (mode) {
        this.centerStyle.bgc = "#212121";
      } else {
        this.centerStyle.bgc = "#fff";
      }
    },
    // 计算每个图片高度
    Calculationheight() {
      let sum = 0;
      this.imgList.forEach((item) => {
        //遍历prodAllPrice这个字段，并累加
        this.huakuai.push((sum += Number(item.height)));
      });
      this.bookmax = this.huakuai.length - 1;
    },
    // 目录无限滚动
    load() {
      if (this.count <= this.chapterList.length) return;
      this.page++;
      this.getChapter(this.book_id, this.page);
    },
    // 请求内容
    conten(catalogue_id) {
      ContentsingleMhApi({
        book_type: 2,
        catalogue_id: catalogue_id,
      }).then((res) => {
        // 重置滑块 并返回头部
        this.chapervalue = 1
        document.getElementById(`id0`).scrollIntoView(true);

        console.log(res, "res");
        // 请求数据
        this.next_id = res.data.next_id;
        this.pre_id = res.data.pre_id;
        this.book_name = res.data.book_name;
        // 解码
        let a = Decrypt(res.data.content);
        let b = JSON.stringify(a);
        let reg = /\\u0000/g;
        let replaceAfter = b.replace(reg, "");
        let c = JSON.parse(replaceAfter);
        this.imgList = JSON.parse(c);
        this.Calculationheight();
      });
    },
    // 请求章节
    getChapter(bookid, page) {
      ContentsingleBookApi({
        book_id: bookid,
        size: 5,
        page: page,
      }).then((res) => {
        console.log(res, "rerrere");
        this.chapterList.push(...res.data);
        this.count = res.data[0].count;
      });
    },
  },
  created() {
    // 获取body高度
    this.offsetHeight = document.body.offsetHeight;
    // 获取漫画内容
    this.conten(97427);
    this.getChapter(this.book_id, this.page);
  },
  components: {
    Head,
  },
};
</script>

<style lang='less' scoped>
.el-image {
  display: block;
}
.comicreader {
  width: 100vw;
  height: 100vh;
  .headcss {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
  }
  .centerBox {
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
    // justify-content: center;
    .nextword {
      width: 200px;
      height: 48px;
      line-height: 48px;
      border-radius: 3px;
      text-align: center;
      display: block;
      color: #fff;
      background-color: #3af;
      margin-bottom: 66px;
      margin-top: 20px;
    }
  }
  .nigthmodecss {
    background-color: #212121;
  }
  .foodBox {
    width: 100vw;
    height: 66px;
    background: #0e0d0d;
    position: fixed;
    left: 0;
    bottom: 0;
  }
  .food {
    width: 1200px;
    height: 66px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    .sliderbox {
      font-size: 13px;
      font-family: PingFang SC;
      color: #ffffff;
      display: flex;
      align-items: center;
      margin-left: 30px;
      .el-slider {
        width: 464px;
        margin-left: 25px;
      }
    }
    .operationBox {
      display: flex;
      font-size: 13px;
      font-family: PingFang SC;
      position: relative;
      color: #ffffff;
      .text {
        height: 66px;
        line-height: 66px;
        margin-left: 42px;
      }
      .textpopup {
        position: relative;
        .allchaper {
          width: 221px;
          height: 375px;
          background-color: #303030;
          padding: 0 16px 0 19px;
          box-sizing: border-box;
          position: absolute;
          left: 0;
          top: -375px;
          z-index: 10;
          .alltext {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            opacity: 0.8;
          }
          .titlebox {
            width: 150px;
            height: 300px;
          }
        }
      }
      .textimg {
        display: flex;
        align-items: center;
        img {
          width: 23px;
          height: 23px;
          margin-right: 10px;
        }
      }
    }
    .el-input-number {
      width: 122px;
      height: 38px;
      background: rgba(255, 255, 255, 0);
      border: 1px solid #686868;
      opacity: 1;
      border-radius: 19px;
    }
  }
}
</style>